<template>
  <view class="activity-circle-container" @click="onContainerClick">
    <view class="activity-circle" :class="{ 'is-refreshing': isRefreshing }">
      <!-- 活跃度进度部分 -->
      <view class="circle-progress">
        <view
          class="circle-progress-inner"
          :style="{ height: `${percentage}%` }"
        >
          <!-- 水波效果容器 -->
          <view class="wave-container">
            <view class="wave wave1"></view>
            <view class="wave wave2"></view>
          </view>
        </view>
      </view>

      <!-- 外圈装饰 -->
      <view class="circle-border"></view>

      <!-- 百分比数字 -->
      <view class="percentage-label">{{ percentage }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import activityUtils from "@/utils/activityUtils";

// 状态变量
const liveness = ref(0);
const percentage = ref(0);
const hasCheckedIn = ref(false);
const isRefreshing = ref(false);
const refreshCooldown = ref(false);

// 监听活跃度变化
let removeListener = null;

// 处理活跃度数据变化
const handleActivityDataChange = (data) => {
  liveness.value = data.liveness;
  percentage.value = Math.min(100, data.liveness);
  hasCheckedIn.value = data.hasCheckedIn;
  isRefreshing.value = data.isRefreshing;
  refreshCooldown.value = data.refreshCooldown;
};

// 点击组件容器
const onContainerClick = () => {
  // 添加触感反馈
  uni.vibrateShort({
    success: () => {
      // 刷新活跃度
      activityUtils.refreshLiveness();

      // 显示刷新提示
      uni.showToast({
        title: "正在刷新活跃度...",
        icon: "none",
        duration: 1000,
      });
    },
  });
};

// 组件挂载时初始化
onMounted(async () => {
  // 注册活跃度变化监听器
  removeListener = activityUtils.addListener(handleActivityDataChange);

  // 初始化活跃度数据
  await activityUtils.initialize();

  // 获取当前活跃度数据
  const data = activityUtils.getActivityData();
  handleActivityDataChange(data);
});

// 页面显示时更新数据
onShow(() => {
  activityUtils.checkSignInStatus();
  activityUtils.getLiveness();
});

// 组件卸载时清理资源
onUnmounted(() => {
  if (removeListener) {
    removeListener();
  }
});
</script>

<style lang="scss" scoped>
.activity-circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 86rpx;
  height: 86rpx;
}

.activity-circle {
  position: relative;
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  &:active {
    transform: scale(0.92);
  }

  &.is-refreshing {
    animation: pulse 1.5s infinite ease-in-out;
  }
}

.circle-border {
  position: absolute;
  top: 4rpx;
  left: 4rpx;
  right: 4rpx;
  bottom: 4rpx;
  border-radius: 50%;
  border: 1rpx solid rgba(45, 200, 223, 0.3);
  z-index: 2;
  pointer-events: none;
}

.circle-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;

  .circle-progress-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2dc8df;
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;

    .wave-container {
      position: absolute;
      top: -10rpx;
      left: 0;
      width: 100%;
      height: 30rpx;
      overflow: hidden;

      .wave {
        position: absolute;
        top: -15rpx;
        left: 0;
        width: 200%;
        height: 30rpx;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0.5)
        );
        border-radius: 100%;
      }

      .wave1 {
        animation: waveLeft 1.5s linear infinite;
      }

      .wave2 {
        top: -10rpx;
        opacity: 0.7;
        animation: waveRight 1.8s linear infinite;
      }
    }
  }
}

.percentage-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 25rpx;
  text-align: center;
  z-index: 3;
  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.9);
}

@keyframes waveLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes waveRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow: 0 4rpx 20rpx rgba(45, 200, 223, 0.6);
  }
}
</style>
